<template>
  <div id="cornerComment" v-if="dialogVisible">
    <div class="cornerComment-in">
      <div class="cornerComment-in-title">
        <span>{{ cornerId.name }} 记录生活</span>
        <span class="el-icon-circle-close close-Btn-line" @click="closePOpup"></span>
      </div>
      <div class="commentBody">
        <div class="form-linebox">
          <span class="form-linebox-left">区角学生:</span>
          <div class="form-linebox-right">
            <v-selectpage :data="selectpagelist" key-field="student_id" show-field="name" class="form-control"
                          :multiple="true" v-model="scoreValue" @values="scoreListFn($event)" placeholder="选择点评学生"
                          title="选择点评学生"></v-selectpage>
          </div>
        </div>
        <div class="form-pointTitle" v-if="cornerCommentType=='collection'">
          采集标签
        </div>
        <div class="form-linebox" v-if="cornerCommentType=='collection'">
          <v-selectpage :data="selectTipslist" key-field="id" show-field="name" class="form-control" :multiple="true"
                        v-model="tag_ids" @values="tagsFn($event)" placeholder="选择采集标签" title="选择采集标签"></v-selectpage>
          <p style="margin-top:5px;font-size: 12px;color:#999;">标签对应采集类型，标签可不选择</p>
        </div>
        <!--        点评只针对点评-->
        <div v-if="cornerCommentType=='commoent'">
          <div class="form-pointTitle">
            评分事项
          </div>
          <div class="comment-list" v-for="(item,index) in fraction" :key="index">
            <p class="comment-list-title">{{ index + 1 }}.{{ item.assess.title }}</p>
            <div class="comment-list-point">
              <el-radio-group v-model="item.val">
                <el-radio :label="radioIndex" v-for="(radioItem,radioIndex) in item.fraction" :key="radioItem.id">
                  {{ radioItem.name }}（{{ radioItem.score }}分）
                </el-radio>
              </el-radio-group>
            </div>
          </div>
        </div>
        <div v-else>
          <div class="form-pointTitle">
            点评事项
          </div>
          <!--          <div class="form-linebox mb-10">-->
          <!--            <span class="form-linebox-left">点评类型:</span>-->
          <!--            <div class="form-linebox-right">-->
          <!--              <el-radio-group v-model="pointType" @change="changeRadio">-->
          <!--                <el-radio :label="0">图片文字</el-radio>-->
          <!--                <el-radio :label="1">视频文字</el-radio>-->
          <!--              </el-radio-group>-->
          <!--            </div>-->
          <!--          </div>-->
          <div class="form-linebox mb-10">
            <span class="form-linebox-left">点评图片:</span>
            <div class="form-linebox-right">
              <el-upload
                  class="addicon"
                  accept="image/png, image/jpeg"
                  list-type="picture-card"
                  :action="$uploadImg"
                  :file-list="fileList"
                  :limit="9"
                  :on-success="handleSuccess"
                  :on-remove="handleRemove"
                  :before-upload="beforeAvatarUpload">
                <i class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </div>
          </div>
          <div class="form-linebox mb-10">
            <span class="form-linebox-left">点评视频:</span>
            <div class="form-linebox-right">
              <el-upload
                  class="addicon"
                  :action="$uploadImg"
                  :show-file-list="false"
                  :file-list="videofileList"
                  accept=".mp4"
                  :limit="1"
                  :on-success="handlevideoSuccess"
                  :before-upload="beforevideoUpload"
                  :on-progress="handprogress"
              >
                <div v-if="editForm.video!==''">
                  <video :src="imghttp+editForm.video"
                         class="avatar"
                         style="background: #000"
                         controls="controls"
                  >您的浏览器不支持视频播放
                  </video>
                  <span class="detelBox" @click.stop="handlevideoRemove">删除</span>
                </div>
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                <div
                    slot="tip"
                    class="el-upload__tip"
                >介绍视频记录生活，最多上传一个（仅支持50M以内）
                </div>
              </el-upload>
              <el-progress :percentage="percentage" v-show="percentageStatus"></el-progress>
            </div>
          </div>
          <div class="form-linebox">
            <span class="form-linebox-left">点评内容:</span>
            <div class="form-linebox-right">
              <el-input v-model="editForm.content" auto-complete="off" placeholder="填写该生点评" type="textarea"></el-input>
            </div>
          </div>
        </div>
      </div>
      <div class="cornerComment-in-footer">
        <el-button type="primary" @click="saveFn" size="small">提交评分</el-button>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  props: ['cornerId', 'visible', 'cornerCommentType'], // commoent 学生点评 collection 学生采集
  data() {
    return {
      dialogVisible: false,
      radio: '',
      fraction: [],
      editId: '',
      selectpagelist: [],
      selectTipslist: [],
      scoreValue: '',
      selectModel: '',
      dataList: [],
      tag_ids: '',
      fileList: [],
      videofileList:[],
      imghttp: '/',
      editForm: {
        pic: '',
        video: '',
        content: ''
      }, // 编辑界面数据
      pointType: 0,
      uploadPic: [],
      percentage: 0,
      percentageStatus: false
    }
  },
  watch: {
    visible() {
      this.dialogVisible = this.visible
      if (this.visible) {
        console.log('cornerId:', this.cornerId)
        this.getApplyStudent()
        this.InitFn()
        this.getTagsFn()
      }else{
        this.videofileList = []
        this.editForm.video  = ''
      }
    }
  },
  created() {
  },
  methods: {
    // 获取评分数值
    InitFn() {
      this.$fetch(this.api.admin_corner_edit, {
        id: this.cornerId.corner_id
      }).then((response) => {
        if (response.code === 0) {
          for (let n in response.vo.assess) {
            // response.vo.assess[n].fraction = JSON.parse(response.vo.assess[n].fraction)
            response.vo.assess[n].val = ''
          }
          this.fraction = response.vo.assess
          console.log('获取的评分规则：', this.fraction)
        } else {
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    getApplyStudent() {
      this.$fetch(this.api.admin_corner_apply_student, {
        type: 2,
        corner_id: this.cornerId.corner_id
      }).then((response) => {
        if (response.code === 0) {
          this.selectpagelist = response.list.data
        } else {
        }
      }).catch((err) => {
        // console.log(err)
      })
    },
    getTagsFn() {
      this.$fetch(this.api.corner.comment.tagsIndex, {}).then((response) => {
        if (response.code === 0) {
          this.selectTipslist = response.list.data
        } else {
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    scoreListFn(option) {
      console.log(option)
    },
    tagsFn(option) {
      console.log(option)
    },
    // 点评
    saveFn() {
      if (this.cornerCommentType === 'collection') {
        this.submitForm()
        return
      }
      if (!this.scoreValue) {
        this.$message.error('选择点评的学生')
        return
      }
      let optionData = {
        corner_id: this.cornerId.corner_id,
        student_id: this.scoreValue,
        list: '',
      }
      console.log('optionData:', optionData)
      let list = []
      for (let i in this.fraction) {
        let array_ = {}
        array_.items_id = this.fraction[i].assess.id
        array_.domain_ids = this.fraction[i].domain_ids
        if (this.fraction[i].val) {
          array_.evaluate_id = this.fraction[i].fraction[this.fraction[i].val].id
          array_.score = this.fraction[i].fraction[this.fraction[i].val].score
          list.push(array_)
        }
      }
      if (!list.length) {
        this.$message.error('至少需一项评分')
        return
      }
      optionData.list = JSON.stringify(list)
      console.log(optionData)
      let status = 1;
      if(status){
        return
      }
      let n = this
      this.$post(this.api.corner.comment.add, optionData).then((response) => {
        if (!response.code) {
          for (let i in n.fraction) {
            n.fraction[i].val = ''
          }
          n.scoreValue = ''
          n.$message.success(response.msg)
        } else {
        }
      }).catch((err) => {
        console.log(err)
      })
      // [{"items_id":"选项id","domain_ids":"1,2","evaluate_id":"评分类型id","score":"分数"},{"items_id":"选项id","domain_ids":"1","evaluate_id":"评分类型id","score":"分数"}]
    },
    // 关闭弹窗
    closePOpup() {
      this.$emit('update:visible', false)
    },
    // 选择图片===============star
    handleSuccess(response) {
      this.uploadPic.push(response.data.name)
    },
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isLt2M
    },
    handlevideoSuccess(res, file) {
      if (res.code === 0) {
        this.editForm.video = res.data.name
        this.percentageStatus = false;
        this.percentage = 0;
      }
    },
    handleRemove(file, fileList) {
      let index_ = this.uploadPic.indexOf(file.response.data.name)
      this.uploadPic.splice(index_, 1)
    },
    handlevideoRemove() {
      this.editForm.video = ''
      this.videofileList = []
    },
    beforevideoUpload(file) {
      const isLt50M = file.size / 1024 / 1024 < 50
      if (['video/mp4'].indexOf(file.type) == -1) {
        this.$message.error('请上传正确的视频格式')
        return false
      }
      if (!isLt50M) {
        this.$message.error('上传视频大小不能超过50MB哦!')
        return false
      }
      this.percentageStatus = true
    },
    // 采集数据
    submitForm() {
      let data_ = {}
      // apply_id 	整型 	必填 	1 	- 	申请id
      // content 	整型 	必填 	1 	- 	文字
      // pic 	整型 	必填 	1 	- 	图片
      // video 	整型 	必填 	1 	- 	视频
      console.log('editForm:', this.editForm, this.uploadPic.length)
      if (!this.scoreValue) {
        this.$message.error('选择点评的学生')
        return
      }
      if (!this.scoreValue) {
        this.$message.error('选择点评的学生')
        return
      }
      if (!this.uploadPic.length && !this.editForm.video) {
        this.$message.error('图片/视频至少选择一项上传')
        return
      }
      // corner_id 区角id
      data_.corner_id = this.cornerId.corner_id
      // student_id 学生id
      data_.student_id = this.scoreValue
      data_.content = this.editForm.content
      data_.pic = this.uploadPic.join(',')
      data_.video = this.editForm.video
      data_.tag_ids = this.tag_ids
      console.log('提交的数据：', data_)

      this.$post(this.api.corner.studentcomment.add, data_).then((response) => {
        if (response.code === 0) {
          this.$message.success(response.msg)
        } else {
          this.$message.error(response.msg)
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    changeRadio() {
      console.log(this.pointType)
      if (Number(this.pointType) === 1) {
        this.uploadPic = []
      }
    },
    handprogress(option) {
      this.percentage = parseInt(option.percent)
    }
  },
  mounted() {
  }
}
</script>
<style scoped>
#cornerComment {
  height: 100vh;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, .5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9;
}

.cornerComment-in {
  width: 60%;
  height: 80%;
  background: #fff;
  display: flex;
  flex-direction: column;
  border-radius: 5px;
}

.cornerComment-in-title {
  height: 50px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ddd;
  font-size: 24px;
}

.cornerComment-in-title span {
  padding: 0 10px;
}

.cornerComment-in-title span:first-child {
  flex: 1;
  font-size: 16px;
}

.cornerComment-in-footer {
  height: 50px;
  border-top: 1px solid #ddd;
  display: flex;
  align-items: center;
  padding: 0 10px;
  justify-content: center;
}

.commentBody {
  padding: 20px 30px;
  flex: 1;
  overflow-y: auto;
}

.form-linebox {
  display: flex;
  align-items: center;
  padding-left: 20px;
}

.form-linebox-left {
  padding-right: 20px;
}

.form-pointTitle {
  margin: 20px 0;
  font-size: 16px;
  font-weight: bold;
  background: #f7f5f5;
  padding: 10px 5px;
}

.comment-list {
  padding-left: 20px;
  margin-bottom: 10px;
}

.comment-list-title {
  margin-bottom: 10px;
  font-size: 14px;
}

.close-Btn-line {
  cursor: pointer;
}
</style>


